<template>
    <div class="search">
    <el-col :span="12">
        <el-button size="mini" type="primary" @click="addRow">添加</el-button>
        <el-button size="mini" type="primary" @click="removeRows">删除</el-button>
        <el-button size="mini" type="primary" @click="loadTableRows">刷新</el-button>
    </el-col>
    </div>
    <el-table
      ref="multipleTableRef"
      v-loading="loading"
      :data="tableRows"
      highlight-current-row
      @selection-change="selectionChange"
      @current-change="currentChange"
      >
        <el-table-column type="selection" width="50" align="center"></el-table-column>
        <el-table-column label="序号" type="index" width="80"></el-table-column>
        <el-table-column prop="name" label="名称" width="150" align="center"></el-table-column>
        <el-table-column prop="pyName" label="拼音" width="150" align="center"></el-table-column>
        <el-table-column prop="type" label="类型" width="150" align="center"></el-table-column>
        <el-table-column prop="valueCountType" label="关系" width="150" align="center"></el-table-column>
        <el-table-column prop="formAttrSelect" label="范围" width="150" align="center"></el-table-column>
        <el-table-column prop="showAttr" label="表单显示名" width="150" align="center"></el-table-column>
        <el-table-column label="操作" align="center" width="150px">
            <template slot-scope="scope">
            <el-button size="mini" type="primary" @click="editRow(scope.row)">修改</el-button>
            <el-button size="mini" type="danger" @click="removeRow([scope.row])">删除</el-button>
            </template>
        </el-table-column>
    </el-table>
    <!-- 分页工具条 -->
    <pagination
        v-if="total > 0"
        :total="total"
        v-model:page="searchData.pageNum"
        v-model:limit="searchData.pageSize"
        @pagination="loadTableRows"
    />

    <addComp :props="addCompProps" @callback="callback" ></addComp>
    
</template>

<script lang="ts">
export default {
  name: 'appMng'
};
</script>

<script setup lang="ts">
    /***基础组件引入***/
    import { reactive, ref, watch, onMounted, toRefs } from 'vue'
    import { ElMessage } from 'element-plus';

    /****子组件引入****/
    import addComp from './add.vue';
    import editComp from './edit.vue';
   
    /*****请求组件引入****/
    import { formAttrSearch, removeFormAttr } from '@/api/formAttr';

   // const deptTreeRef = ref(ElTree); 
    const state = reactive({
      tableRows: [],
      total: 0,
      searchData: {pageNum:1,pageSize:10},
      loading: false,
      ids: [],
      currentRow:null,
      addCompProps:{data:{},visible:false},
    });
    const {
      tableRows,
      searchData,
      total,
      loading,
      currentRow,
      addCompProps,
    } = toRefs(state);

    function loadTableRows(){
      state.loading = true;
      formAttrSearch(state.searchData).then(response =>{
        state.tableRows = response.data.list;
        state.total = response.data.total;
        state.loading=false;
      });
    }

    function selectionChange(selection: any) {
      state.ids = selection.map((item: any) => item.id);
    }

    function currentChange(row: any){
       state.currentRow = row;
    }

    //添加修改回调
    function callback(callData) {
      state.addCompProps.visible = false;
      if(!callData.refresh){
        return;
      }
      loadTableRows();
    }

    function addRow() {
      //初始化，重新传递值，防止子组件，数据变化无法检查到
      state.addCompProps.visible = true;
      state.addCompProps.data = {formId: state.searchData.formId};
    };

    function removeRows(){
       removeApp(state.ids).then(response =>{
          ElMessage.success("删除成功");
          loadTableRows();
       });
    }

      /**监控父组件传值并赋值***/
    const parentData = defineProps({
        props: Object  
    });

    watch(() => parentData.props,
       // 回调函数 callback
       (newValue, oldValue) => {
          if(!newValue){
              state.tableRows=[];
              return;
          }
          state.searchData.formId = newValue.id;
          loadTableRows();
       }, {immediate:true, deep: true}
    );
  
</script>

<style></style>